<script setup lang="tsx">
import { type DataTableColumns, NButton, NSpace } from 'naive-ui'
import { usePagination } from 'vue-request'
import UploadWork from '../../components/upload-work.vue'
import type { WorkListItem } from '~/api'
import { announcement, deleteWorkById, getSubmitWorkList } from '~/api'

const showModal = ref(false)
const isWorkId = ref('')
const isOpenType = ref<'perview' | 'add' | 'edit' | 'submit'>('add')
const store = useTeamInfoStore()
const NoticeHtml = ref('')
const { basicInfo, userInfo } = storeToRefs(store)

const { data, current, pageSize, refresh, loading } = usePagination(getSubmitWorkList, {
  defaultParams: [{
    scheduleId: basicInfo.value?.scheduleId,
    userId: userInfo.value?.userId,
    pageNumber: 1,
    pageSize: 10,
  }],
  pagination: {
    currentKey: 'pageNumber',
    pageSizeKey: 'pageSize',
    totalKey: 'total',
  },
})

onMounted(async () => {
  const res = basicInfo.value?.scheduleId ? await announcement(basicInfo.value.scheduleId) : { data: { scheduleNotice: '' } }
  NoticeHtml.value = res.data.userNotice
})

const columns: DataTableColumns<WorkListItem> = [
  // {
  //   title: '缩略图',
  //   key: 'worksImgMainUrl',
  // },
  {
    title: '作品名称',
    key: 'worksName',
    width: 100,
  },
  {
    title: '提交日期',
    key: 'createTime',
    width: 100,
  },
  // {
  //   title: '状态',
  //   key: 'worksStatus',
  //   render(row) {
  //     if (row.worksStatus === 'DRAFT')
  //       return '暂存'

  //     else if (row.worksStatus === 'IN_APPROVAL')
  //       return '审核中'

  //     else if (row.worksStatus === 'APPROVAL_PASS')
  //       return '审核通过'
  //   },
  // },
  {
    title: '操作',
    key: 'length',
    fixed: 'right',
    align: 'center',
    width: 130,
    render(row) {
      return <NSpace justify='center'>
        {row.worksStatus === 'DRAFT'
          ? <>
        <NButton type="primary" quaternary onClick={() => toSubmitWork(row)}>提交</NButton>
        </>
          : null}

        <NButton type="primary" quaternary onClick={() => perview(row)}>查看</NButton>
        {row.worksStatus === 'DRAFT'
          ? <>
        <NButton type="primary" quaternary onClick={() => editItem(row)}>修改</NButton>
        <NButton type="error" quaternary onClick={() => deleteItem(row)}>删除</NButton>
          </>
          : null
        }
      </NSpace>
    },
  },
]

function toSubmitWork(row: WorkListItem) {
  isOpenType.value = 'submit'
  isWorkId.value = row.id
  showModal.value = true

  // getSubmitWorkById(row.id).then((res) => {
  //   const data = res.data
  //   submitWork({
  //     id: data.id,
  //     scheduleId: data.scheduleId,
  //     userId: data.userId,
  //     operateType: 'SUBMIT',
  //     worksName: data.worksName,
  //     /** 是否作品组图(0，是1，否 */
  //     isGroupImg: `${data.isGroupImg}`,
  //     /** 作品简介 */
  //     worksIntro: data.worksIntro,
  //     /** "创意理念 */
  //     worksOriginality: data.worksOriginality,
  //     /** "研究内容 */
  //     studyContent: data.studyContent,
  //     /** 参赛作品高清图，逗号隔 */
  //     worksImg: data.worksImg,
  //     /** 作品主图 */
  //     worksImgMain: data.worksImgMain,
  //     /** 承诺书附件ID */
  //     promise: data.promise,
  //     /** 作品视频附件ID */
  //     worksVideo: data.worksVideoVo?.map(d => d.id).join(',') ?? '',
  //     /** 验证码 */
  //     code: '1',
  //     isPc: false,
  //   }).then((res) => {
  //     message.success('提交成功')
  //     refresh()
  //   })
  // })
}

function perview(row: WorkListItem) {
  isOpenType.value = 'perview'
  isWorkId.value = row.id
  showModal.value = true
}

function editItem(row: WorkListItem) {
  isOpenType.value = 'edit'
  isWorkId.value = row.id
  showModal.value = true
}

function deleteItem(row: WorkListItem) {
  dialog.error({
    title: '提示',
    content: '确定删除该条记录吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      deleteWorkById(row.id).then((res) => {
        message.success('删除成功！')
        refresh()
      })
    },
    onNegativeClick: () => {

    },
  })
}

function handleUpload() {
  isOpenType.value = 'add'
  isWorkId.value = ''
  showModal.value = true
  // modal.create({
  //   title: '上传作品',
  //   // internalStyle: {
  //   //   width: '80vw',
  //   // },
  //   width: '80vw',
  //   style: { width: '80vw' },
  //   action: () => null,
  //   content: () => <UploadWork />,
  // })
}

function handleSubmit() {
  showModal.value = false
  current.value = 0
  // refresh()
}
</script>

<template>
  <div h-full flex="~ col gap-4">
    <div bg="#fff" p="4">
      <div text="" font="500" mb-2>
        最新公告
      </div>
      <div text="opacity-70" v-html="NoticeHtml" />
    </div>
    <div bg="#fff" flex="~ 1  col" p="4">
      <n-data-table
        remote
        :loading="loading"
        :columns="columns"
        :data="data?.data.content"
        :bordered="false"
        :pagination="{
          itemCount: data?.data.total,
          pageSize,
          page: current,
          onUpdatePage(page) {
            current.value = page
          },
        }"
      />
      <div text="4 " font="500" m="y-4">
        提交作品
      </div>

      <div cursor="pointer" w="100px" h="100px" border="~ #ECECEC solid " flex="~ justify-center items-center" @click="handleUpload">
        <div class="i-carbon:add text-50px" />
      </div>

      <div text="opacity-70" m="t-4">
        注：最多提交3个作品
      </div>
    </div>
  </div>

  <n-modal v-model:show="showModal" closable :mask-closable="false">
    <n-card
      style="width: 80vw;  overflow: hidden;"
      title="模态框"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
      closable
      @close="showModal = false"
    >
      <template #header>
        <div text="center">
          上传作品
        </div>
      </template>
      <UploadWork :is-open-type="isOpenType" :is-work-id="isWorkId" @submit="handleSubmit" />
    </n-card>
  </n-modal>
</template>

<style scoped>

</style>
